<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css"/>
        <link href="assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
			<script src="assets/js/jquery.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <![endif]-->
		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
        <script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>
        <script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
        <script src="js/lrtk.js" type="text/javascript" ></script>
  <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/layer/layer.js"></script>
<title>分类管理</title>
</head>

<body>
<div id="vuebox">
<div class=" clearfix">
 <div id="category">
    <div id="scrollsidebar" class="left_Treeview">
    <div class="show_btn" id="rightArrow"><span></span></div>
    <div class="widget-box side_content" >
    <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
     <div class="side_list">
      <div class="widget-header header-color-green2">
          <h4 class="lighter smaller">产品类型列表</h4>
      </div>
      <div class="widget-body">
          <div class="widget-main padding-8">
            <div  class="form-group">
              <select class="form-control" v-model="selecata1" @change='sellChange'>
                <option value="0">请选择一级分类</option>
                <option v-for="item in cata1" :value="item.id">{{item.name}}</option>
              </select>
              <select class="form-control" style="margin-top: 10px" v-model="selecata2" @change='sel2Change'>
                <option value="0">请选择二级分类</option>
                <option v-for="item in cata2" :value="item.id">{{item.name}}</option>
              </select>
              <select class="form-control" style="margin-top: 10px" v-model="selecata3" @change='sel3Change'>
                <option value="0">请选择三级分类</option>
                <option v-for="item in cata3" :value="item.id">{{item.name}}</option>
              </select>
            </div>
          </div>
  </div>
  </div>
  </div>  
  </div>
    <!--<iframe ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO  SRC="product-category-add.html" class="page_right_style"></iframe>-->

   <div><button type="button" class="btn btn-primary" @click="addAttr">+添加SPU</button></div>
   <div id="seleSpu" v-show="seleSpu==1">
     <table class="table table-striped">
       <thead>
       <tr>
         <th>商品id</th>
         <th>商品名称</th>
         <th>商品描述</th>
         <th>操作</th>
       </tr>
       </thead>
       <tbody>
       <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
       </tr>
       </tbody>
     </table>
   </div>
   <div id="addSpu" v-show="seleSpu==2">
     <h1 style="color: red">添加spu</h1>
   </div>
   <div id="addSku" v-show="seleSpu==3">
     <h1 style="color: brown">添加sku</h1>
   </div>
   <!--添加属性名-->
 </div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
  var vm=new Vue({
            el:"#vuebox",
            data:{
            cata1:{},
            selecata1:"0",
                cata2:{},
                selecata2:"0",
                cata3:{},
                selecata3:"0",
                attrList:{},
                seleSpu:2
            },
            methods:{
                sellChange:function(){
                    axios.get("/getCatalog2",{params:{catalog1Id:this.selecata1}}).then(res=>{
                        this.selecata2=0;
                        this.selecata3=0;
                        this.cata3={},
                        this.attrList={},
                        this.cata2=res.data;
                    })
        },
                sel2Change:function () {
                    axios.get("/getCatalog3",{params:{catalog2Id:this.selecata2}}).then(res=>{
                        this.selecata3=0;
                        this.cata3=res.data;
                    })
                },
                sel3Change:function () {
                    axios.get("/seleAttrByCata3",{params:{catalog3Id:this.selecata3}}).then(res=>{
                        this.attrList=res.data;
                    })
                },
                addAttr:function () {
                    if(this.selecata3==0){
                layer.msg("请选择三级分类")
                return;
                    }else{

                    }
                }
            },
            mounted(){
                axios.get("/getCatalog1").then(res=>{
                    this.cata1=res.data;
                })
            }
    })
</script>
